<template>
  <div>
    <el-form ref="form" label-width="120px">
      <el-form-item label="商品名称" prop="productId">
        <el-row>
          <el-col :span="22">
            <el-input v-model="queryParams.name" placeholder="请输入商品名称" />
          </el-col>
          <el-col :span="2">
            <el-button icon="el-icon-search" plain
                       :disabled="queryParams.name == ''"
                       style="margin: 0px 0 0 23px;"
            @click="searchProductList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row>
          <transition name="el-zoom-in-top">
<!--              <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
                <li v-for="i in count" class="list-item">{{ i }}</li>
              </ul>-->
            <div
              v-show="show2"
              class="infinite-list-wrapper transition-box"
              v-infinite-scroll="load"
              style="overflow:auto"
              infinite-scroll-disabled="disabled">
<!--                <p v-for="data in dataList">{{data}}</p>-->

              <div v-for="data in dataList">
                <el-descriptions  title="商品信息">
                  <el-descriptions-item label="商品名称">
                    <el-link type="primary" @click="getProductSkuList(data.id)">{{data.name}}</el-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="商品图片">
                    <image-preview :src="data.img" :width="50" :height="50"/>
                  </el-descriptions-item>
                </el-descriptions>
                <el-divider></el-divider>
              </div>
              <p v-if="loading" class="show-text">加载中...</p>
              <p v-if="noMore" class="show-text">没有更多了</p>
            </div>
          </transition>
        </el-row>
      </el-form-item>
      <el-form-item label="商品SKU" prop="productSkuId">
        <el-radio v-model="form.skuId" v-for="sku in skuList"
                  :label="sku.id"
                  :key="sku.id">{{sku.sku}}</el-radio>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {listInfo} from "@/api/product/info";
import {listSku} from "@/api/product/sku";

export default {
  name: "index",
  props:{
      value: {type: Object},
      productId: {
        type: String
      },
      skuId: {
        type: String
      }
  },
  watch:{
    "form.productId": function (newVal, oldVal) {
      this.writeForm(this.productId, newVal)
    },
    "form.skuId": function (newVal, oldVal) {
      this.writeForm(this.skuId, newVal)
    },
  },
  data() {
    return {
      show2: false,
      form: {
        productId: '',
        skuId: ''
      },
      queryParams: {
        name: '',
        pageNum: 1,
        pageSize: 2,
      },
      dataList: [],
      total: 0,
      loading: false,
      skuList: []
    }
  },
  created() {
    console.log(this.value)
    console.log(this.productId)
    console.log(this.skuId)
  },
  computed: {
    noMore () {
      return this.dataList.length >= this.total
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    writeForm(key, val){
      let form = {};
      for (let valKey in this.value){
        form[valKey] = valKey == key ? val : this.value[valKey]
      }
      this.$emit("input", form);
    },
    /**
     * 通过商品ID获取SKU列表
     * @param productId 商品id
     */
    getProductSkuList(productId){
      this.form.productId = productId
      listSku({productId:productId,pageSize: 9999}).then(response => {
        this.skuList = response.rows
      })
    },
    /**
     * 查询商品列表
     */
    searchProductList(){
      listInfo(this.queryParams).then(response => {
        this.show2 = true
        if (response.rows != null){
          response.rows.forEach(row => this.dataList.push(row))
          this.total = response.total
          this.loading = false
        }
      })
    },
    load () {
      this.loading = true
      this.queryParams.pageNum += 1
      this.searchProductList()
    }
  }
}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 100%;
  height: 300px;
  border-radius: 4px;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.show-text {
  align-content: center;
  padding: 0 45%;
  font-family: 楷体;
  font-size: 25px;
}
</style>
